<template>
	<view class="footer-nav">
		<view class="zhedang-box">
			<view class="left-box">
				<view></view>
			</view>
			<view class="right-box">
				<view></view>
			</view>
		</view>
		<view class="neirong-box">
			<view class="neirong">
				<view class="foot-neirong-left">
<text @click="herfto('agents')" style="cursor: pointer;">联系我们</text>
            <view class="line"></view>
            <ul>
              <li>
								<a href="https://twitter.com/oxford_int" class="erweima">
									<i class="iconfont wx">&#xe63f;</i>
									<!-- <image src="../static/weixin.jpg" mode="widthFix" class="erweimapic"> -->
										<img src="../static/weixin.jpg" alt="" class="erweimapic">
								</a>
							</li>
              <li>
								<a href="https://www.facebook.com/oxfordinternationaleducationgroup" class="erweima">
									<i class="iconfont wb">&#xe608;</i>
									<!-- <image src="" mode="widthFix"> -->
									<img src="../static/weibo.jpg" alt="" class="erweimapic">
								</a>
								</li>
              <li>
								<a href="https://uk.linkedin.com/company/oxford-international-education-group" class="erweima">
									<i class="iconfont zh">&#xe69a;</i>
									<!-- <image src="../static/zhihu.jpg" mode="widthFix" class="erweimapic"> -->
										<img src="../static/zhihu.jpg" alt="" class="erweimapic">
								</a>
							</li>
              <li>
								<a href="mailto:info@oxfordinternational.com">
									<i class="iconfont">&#xe63e;</i>
								</a>
							</li>
            </ul>
				</view>
				<view class="foot-neirong-mid">
					<view></view>
				</view>
				<view class="foot-neirong-right">
<text><strong>牛津国际教育集团（中国）</strong></text>
            <text>北京市东城区王府井大街219号4层101内0F-152， 邮编100006</text>
						<!-- <text>国内地址信息</text> -->
            <text>邮箱：<a href="mailto:china@oxfordinternational.com">china@oxfordinternational.com</a></text>
            <!-- <text>电话：+44 020 8293 1188</text> -->
            <text><text>© 牛津国际教育集团 2020</text> <text style="margin: 0 20px" @click="beian">京ICP备2020048881号</text><text @click="mapTo" style="cursor: pointer">网站地图</text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		},
		methods:{
			mapTo(){
				console.log(1111)
				uni.navigateTo({
					url:'../../pages/map/map'
				})
			},
			beian(){
				location.href = 'http://beian.miit.gov.cn'
			}
		}
	}
</script>

<style scoped lang="scss">
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}

	.footer-nav {
		margin-top: -60px;
		/*background: #303030;*/

	}

	.zhedang-box {
		height: 60px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		view {
			flex: 1;
		}
	}

	.left-box {
		width: 50%;
		padding-right: 60px;

		view {
			height: 100%;
			background: #303030;
			position: relative;
		}

		view:before {
			content: '';
			position: absolute;
			width: 85px;
			height: 85px;
			top: 18px;
			right: -42px;
			background: #303030;
			transform: rotate(45deg);
		}
	}

	.right-box {
		width: 50%;
		padding-left: 60px;

		view {
			height: 100%;
			background: #303030;
			position: relative;
		}

		view:before {
			content: '';
			position: absolute;
			width: 85px;
			height: 85px;
			top: 18px;
			left: -42px;
			background: #303030;
			transform: rotate(45deg);
		}
	}

	.neirong-box {
		background: #303030;
		border-bottom: 10px solid #3281c4;
		padding-bottom: 40px;
	}

	.neirong {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: relative;
	}

	.foot-neirong-mid {
		/*margin:0 80px;*/
		position: absolute;
		padding-top: 60px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;

		view {
			height: 80px;
			width: 1px;
			border-left: 1px solid #fff;
			margin-bottom: 40px;
		}

		align-items: center;
	}
	.foot-neirong-right{
	    display: flex;
	    flex: 1;
	    flex-direction: column;
	    align-items: center;
	    text{
	      margin-bottom: 20px;
	      color: #fff;
	      font-weight: 200;
	      strong{
	        font-weight: 700;
	      }
	      font-size: 14px;
	      a{
	        color: #fff;
	        text-decoration: none;
	      }
	    }
	  }
		.foot-neirong-left{
		    display: flex;
		    flex: 1;
		    flex-direction: column;
		    align-items: center;
		    text{
		      display: block;
		      color: #fff;
		      font-weight: 700;
		      font-size: 25px;
		      margin-bottom: 45px;
		      padding-bottom: 15px;
		      position: relative;
		      // line-height: 4rem;
		    }
		    text:after{
		      position: absolute;
		      content: '';
		      width: 52px;
		      height: 5px;
		      background: #fff;
		      left: 50%;
		      margin-left: -26px;
		      bottom: -10px;
		    }
		    ul{
		      margin-top: 10px;
					width: 230px;
					height: 50px;
		      display: flex;
		      flex-direction: row;
		      justify-content: center;
		      li{
		
		        cursor: pointer;
		        margin: 0 10px;
		        a{
		          text-decoration: none;color: #fff;
		          .iconfont{
		            font-size: 30px;
		          }
		        }
		
		      }
		      li:hover{
		        a{
		          color: #3281c4;
		        }
						
		      }
		    }
		
		  }
			.erweima{
			    position: relative;
					width: 100%;
					height: 100%;
					display: block;
			  }
			  .erweima:hover{
			    .erweimapic{
			      display: block;
			    }
			  }
			  .erweimapic{
			    display: none;
			    width: 100px;
			    position: absolute;
			    top: -120px;
			    left: 50%;
			    transform: translateX(-50%);
			
			  }
				ul,li{
					list-style: none;
					padding: 0;
				}
				@media screen and ( max-width: 750px ){
					.neirong{
						flex-direction: column;
					}
					.foot-neirong-mid{
						display: none;
					}
					.foot-neirong-right{
						margin-top: 30px;
						text{
							text-align: center;
							text{
								display: flex;
						flex-direction: column;
						text-align: center;
						justify-content: center;
						align-items: center;
							}
						}
						
					}
					
					
					.left-box {
						width: 50%;
						padding-right: 30px;
					
						view {
							height: 100%;
							background: #303030;
							position: relative;
						}
					
						view:before {
							content: '';
							position: absolute;
							width: 85px;
							height: 85px;
							top: 18px;
							right: -42px;
							background: #303030;
							transform: rotate(45deg);
						}
					}
					
					.right-box {
						width: 50%;
						padding-left: 30px;
					
						view {
							height: 100%;
							background: #303030;
							position: relative;
						}
					
						view:before {
							content: '';
							position: absolute;
							width: 85px;
							height: 85px;
							top: 18px;
							left: -42px;
							background: #303030;
							transform: rotate(45deg);
						}
					}
				}
</style>
